<template>
  <div class="container">
    <div class="title">数据仓储</div>

    <el-button class="add" type="text">
      <i class="el-icon-circle-plus"></i>添加仓库</el-button
    >

    <div id="card">
      <card :card="card" :title="card.title" :text="card.text">
        <span v-for="(item, index) in btnArr" :key="index">
          <el-button class="btn" type="text">{{ item.str }}</el-button>
        </span>
      </card>
    </div>
  </div>
</template>

<script>
import card from "@/layout/component/card.vue";
export default {
  name: "DataStorage",
  components: {
    card,
  },
  data() {
    return {
      btnArr: [{ str: "删除" }, { str: "设置" }, { str: "版本管理" }],
      card: [
        {
          id: 1,
          title: "大数据资料",
          text: "收集与大数据相关的数据资料",
        },
        {
          id: 2,
          title: "大数据资料",
          text: "收集与大数据相关的数据资料",
        },
        {
          id: 3,
          title: "大数据资料",
          text: "收集与大数据相关的数据资料",
        },
      ],
    };
  },
};
</script>

<style scoped>
.title {
  font-size: 36px;
  color: #157dff;
}
#id {
  margin: 49px;
}
.add {
  margin-top: -35px;
  font-size: 20px;
  color: #157dff;
  float: right;
}
.add2 {
  width: 20px;
  height: 20px;
  margin-top: -25px;
  font-size: 10px;
  color: #157dff;
  float: right;
}
.btn {
  float: right;
  padding: 0px 3px;
  margin-top: -9px;
  margin-right: 15px;
}
</style>